<template>
  <div id="father">
    <el-button size="mini" type="primary" round @click="tjrk"
      style="position: absolute;right: 145px;margin-top: 7px;">添加产品</el-button>
    <el-button size="mini" type="danger" round style="position: absolute;right: 80px;margin-top: 7px;" @click="del">删除</el-button>
    <el-button size="mini" type="success" @click="qdtj" round style="position: absolute;right: 16px; margin-top: 7px;">确定</el-button>
    <el-container>
      <div style="width: 100%; padding: 25px;">
        <el-row>
          <el-col>
            <h3 style="margin-top: 30px;text-align: center;">出库申请单</h3>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="15" style="text-align: left;">
            出库申请人: <input type="text" v-model="denjiPersonkc" id="inp" />
          </el-col>
          <el-col :span="9" style="text-align: right;">
            出库理由: <select style="width: 180px">
              <option>请选择</option>
            </select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="15"  style="text-align: left;">
            出库理由: <select style="width: 180px; margin-top: 20px;">
              <option>请选择</option>
            </select>
          </el-col>
          <el-col :span="9" style="text-align: right;">
            退回时间: <input type="text" id="inp" style=" margin-top: 20px;" />
          </el-col>
        </el-row>
      </div>
    </el-container>
    <el-table ref="multipleTable" :data="tableDataa"  border tooltip-effect="dark" style="width: 100%;margin-top: 15px;"
      @selection-change="handleSelectionChange"
			@select="onTableSelect"
			 size="mini">
      <el-table-column type="selection" width="90">
      </el-table-column>
      <el-table-column label="产品名称" width="140">
        <template slot-scope="scope">{{ scope.row.cpmc }}</template>
      </el-table-column>
      <el-table-column prop="cpbh" label="产品编号" width="120">
      </el-table-column>
      <el-table-column prop="pjName" label="描述" width="150">
      </el-table-column>
      <el-table-column label="数量" width="130">
				 <template slot-scope="scope">
					 	<input type="text"  v-model="scope.row.number" id="inp" style=" margin-top: 20px;"/>
				 </template>
      </el-table-column>
      <el-table-column prop="cuncudanwei" label="单位" width="130">
      </el-table-column>
      <el-table-column prop="chengbendange" label="成本单价(元)" width="140">
      </el-table-column>
      <el-table-column label="小计成本" width="152">
	 <template slot-scope="scope">
						 	<input type="text"  v-model="scope.row.Subtotal" id="inp" style=" margin-top: 20px;"/>
	</template>
      </el-table-column>
    </el-table>

    <div id="sons">
      <el-row>
        <el-col :span="9">
          总件数:{{totalsum}}
        </el-col>
        <el-col :span="12" :offset="3">
          总金额:{{totalPrice}}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="9">
          登记人:<input type="text" id="inp" style=" margin-top: 20px;" />
        </el-col>
        <el-col :span="12" :offset="3">
          登记时间 <input type="text" id="inp" style=" margin-top: 20px;" />
        </el-col>
      </el-row>
      <el-row style=" margin-top: 20px;">
        <el-col :span="2" style="margin-left: 72px;">
          登记人:
        </el-col>
        <el-col :span="16">
          <textarea style="width: 100%; height: 100px;">
          </textarea>
        </el-col>
      </el-row>
    </div>
    <el-dialog style="position: absolute; top: -78px;" title="提示" :visible.sync="dialogVisible" width="90%"
      :before-close="handleClose">
      <div style="background-color: #E9EEF3; height: 95px; margin: 10px; padding: 4px; border-radius: 7px;">
        <el-row style="margin-top: 14px;">
          <el-col :span="10" style="font-size: 14px;">
            产品一级分类&nbsp;
            <el-select v-model="sa" size="mini">
              <el-option value="dasd">请选择</el-option>
            </el-select>
          </el-col>
          <el-col :span="10" style="font-size: 14px;">
            产品二级分类&nbsp;
            <el-select v-model="sa" size="mini">
              <el-option value="dasd">请选择</el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row style="margin-top: 14px;">
          <el-col :span="10" style="font-size: 14px;">
            产品三级分类&nbsp;
            <el-select v-model="sa" size="mini">
              <el-option value="dasd">请选择</el-option>
            </el-select>
          </el-col>
          <el-col :span="5" style="font-size: 14px;">
            <el-button size="mini" type="primary" round>查詢</el-button>
          </el-col>
        </el-row>

      </div>
      <el-table :data="tableData" size="mini">
        <el-table-column property="cpbh" label="产品编号" width="250"></el-table-column>
        <el-table-column property="cpmc" label="产品名称" width="190"></el-table-column>
        <el-table-column property="cpjibie" label="用途类型" width="160"></el-table-column>
        <el-table-column property="cuncudanwei" label="单位" width="160"></el-table-column>
        <el-table-column property="chengbendange" label="成本单价" width="160"></el-table-column>
        <el-table-column label="出库" width="100" >
        <template slot-scope="scope">
             <el-button size="mini" @click.native.prevent="ddd(scope.row.cpbh)" round>出库</el-button>
        </template>
      </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 14px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
          layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'repinit',
    data() {
      return {
        tableData: [{
					cpbh:'',
					cpmc:'',
					cpjibie:'',
					cuncudanwei:'',
					chengbendange:'',
						number:0,
						Subtotal:0,
					proSige_id:''
				}],
				totalPrice:0,
				totalsum:0,
				tableDataa:[
					{
						cpbh:'',
						cpmc:'',
						cpjibie:'',
						cuncudanwei:'',
						chengbendange:'',
							number:0,
							Subtotal:0,
						proSige_id:''
					}
				],
				tableDataaa:[],
        dialogTableVisible: false,
         	dialogVisible:false,
					dialogFormVisible: false,
					id:[],
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },

				denjiPersonkc:'',
        formLabelWidth: '120px'

      }
    },
    methods: {
			ddd:function(row){
 this.tableData.findIndex(item =>{
						 if(row==item.cpbh){
							  this.tableDataa.push(item);

						 }
					 })
			},
		del(){
			this.tableDataa.findIndex((item,index) =>{

					 if(this.id.cpbh==item.cpbh){
						 this.tableDataa.splice(index,1);
					}



			})
		},
			tjrk(){

			 this.$http.post("selrkRepadmin")
					.then((rew)=>{
						this.dialogVisible=true;
						this.tableData=rew.data;

						 		this.tableData.forEach(item=>{
						if(item.cpjibie==1){

							item.cpjibie="商品";

						}else if(item.cpjibie==2){

								item.cpjibie="物料";

						}else if(item.cpjibie==3){

								item.cpjibie="委托部件";

						}else if(item.cpjibie==4){
							item.cpjibie="外购商品";

							}else if(item.cpjibie==5){
							item.cpjibie="委托产品";

							}else if(item.cpjibie==6){
							item.cpjibie="服务型产品";

							}
							})
						})
						.catch((err) => { //请求失败
							console.log(err);
						});
			}
			,
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
			handleSelectionChange(val){
				if(val.length>0){
		 		for(let s of val){
				this.id=s;
				s.Subtotal=(s.chengbendange*s.number);
				}
				if(val.length>0){
				 for (var i = 0; i <val.length; i++) {
	              this.totalPrice+=val[i].Subtotal;
								this.totalsum+=parseFloat(val[i].number);
				}
				}else{
					this.totalPrice=0;
					this.totalsum=0;
				}
				}else{
					for(let s of val){
					this.id=s;
					s.Subtotal=0;
					}
					 for (var i = 0; i <val.length; i++) {
					        this.totalPrice=0;
									this.totalsum=0;
					}
			}
},
    onTableSelect(rows,row){
	    let selected=rows.length && rows.indexOf(row) !== -1;
			console.log(selected);
},
				qdtj(){
					this.tableDataa.forEach((item) =>{

						var demo=new URLSearchParams()
						demo.append("chukuid",item.cpbh)
						demo.append("pid",item.cpbh)
						demo.append("reviewSign",'未审核')
						demo.append("kuCunSingin",'未组成')
						demo.append("num",item.number)
						demo.append("subtotal",item.Subtotal)
						demo.append("price",this.totalPrice)
						demo.append("sum",this.totalsum)
						demo.append("yirukunum",0)
						demo.append("time",'2001/5/9')
						demo.append("chukuliyou",1)
						demo.append("yiwcrukunum",0)
						demo.append("reviewSigng",'未复核')
						this.$http.post("updnbRepwltddateiss",demo)
						.then((res) => {
								console.log(res);
							})
						.catch((err) => { //请求失败
							console.log(err);
						});
					})

				}
    }
  }
</script>

<style scoped="scoped">
  #inp {
    border-top: none;
    border-left: none;
    border-right: none;
  }

  th {
    border-top-color: #000000;
  }

  #father {
    height: 523px;
    overflow: hidden;
    background: white;
    border: 1px solid white;
    border-radius: 12px;
    margin-top: 10px
  }

  #sons {
    /* margin: 9px auto; */

    width: 100%;
    padding: 0px;
    background-color: white;
    margin-top: 21px;
    /* border: 3px solid whitesmoke; */
    /* border-radius: 16px; */

  }

  #son {

  padding: 15px;
    width: 100%;
    background-color: white;

  }

  .el-breadcrumb {

    font-size: 13px;
    margin-top: 10px;
    margin-left: 10px;
  }

  .el-table th,
  .el-table td {
    padding: 0px 0;
  }
</style>
